<template>
  <el-dialog :title="dialogTitle" :visible.sync="editDialogVisible" :append-to-body="true" :before-close="cancel">
        <el-form ref="hashDialogForm" :model="editForm" status-icon :rules="verification">
            <el-form-item label="key" prop="key">
                <el-input v-model="editForm.key"/>
            </el-form-item >
            <el-form-item label="value" class="editor-item" prop="value">
                <editor class="editor" v-model="editForm.value" :options="options" @init="editorInit" :lang="editForm.viewType" theme="chrome" style="font-size:13px;"> </editor>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-select v-model="editForm.viewType" :placeholder="$t('aside.pleaseChoose')" @change="viewFormat">
                <el-option
                    v-for="item in viewTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" @click="saveHash">{{$t('aside.determine')}}</el-button>
            <el-button @click="cancel()">{{$t('aside.cancel')}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props:["editDialogVisible","editFormParam"],
    components:{
        editor:require('vue2-ace-editor')
    },
    data(){
        return {
            dialogTitle:"",
            verification:{
                key:[
                    { required: true, message: this.$t("publicFeedback.KeyNotEmpty"), trigger: 'blur' }
                ],
                value:[
                    { required: true, message: this.$t("publicFeedback.ValueNotEmpty"), trigger: 'blur' }
                ]
            },
             viewTypes:[
                {label:"text",value:"text"},
                {label:"json",value:"json"}
            ],
            editForm:{
                key:'',
                value:'',
                viewType:'text'
            },
             options:{
                dialogTitle:"",
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                tabSize:0,
                wrap:"free",
                showPrintMargin:false
            }
        }
    },
    methods:{
        editorInit(){
            require('brace/mode/text')
            require('brace/mode/json')
            require('brace/theme/chrome')
            require('brace/ext/language_tools')
        },
        //格式化
        viewFormat(type){
            if(type==="json"){
                try{
                    this.editForm.value=JSON.stringify(JSON.parse(this.editForm.value), null, 2);
                }catch(e){
                    return false;
                }
            }
            if(type==="text"){
                try{
                    this.editForm.value=JSON.stringify(JSON.parse(this.editForm.value), null, 0);
                    return false;
                }catch(e){
                    return false;
                }
            }
        },
        saveHash(){
            this.$refs.hashDialogForm.validate((valid)=>{
                if(valid){
                    if(this.editForm.viewType==='json'){
                        this.editForm.value=JSON.stringify(JSON.parse(this.editForm.value), null, 0)
                        this.editForm.viewType='text'
                    }
                    if(this.editFormParam.row&&this.editForm.key===this.editFormParam.row.key){
                        //修改值
                        this.editFormParam.row.value=this.editForm.value
                    }
                    this.$emit("saveHash",this.editForm)
                }
            })
        },
        cancel(){
            this.$emit("hideDialog")
        }
    },
    watch:{
        editFormParam(newValue,oldValue){
            if(newValue.row){
                this.dialogTitle=this.$t('publicFeedback.editLine')
                this.editForm.key=newValue.row.key
                this.editForm.value=newValue.row.value
            }else{
                this.editForm.key="";
                this.editForm.value="";
                this.dialogTitle=this.$t('publicFeedback.addLine')
            }
        }
    }
}
</script>

<style scoped>
.editor{
    height: 600px;
    width: 90%;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    overflow: hidden;
}
.editor-item >>> .el-form-item__content{
    height: 300px;
}
.ace_editor >>> .ace_scrollbar::-webkit-scrollbar{
    width : 5px;
    height: 1px;
}
.ace_editor >>> .ace_scrollbar::-webkit-scrollbar-thumb{
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%, 
    transparent);
}
.ace_editor >>> .ace_scrollbar::-webkit-scrollbar-track{
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}
.editor-item >>> .el-form-item__error{
    top: 112%;
}
</style>